<template>
  <div class="content" v-loading="submitBtn">
    <div class="scroll-view-box">
      <!-- <div class="user-title-box">采购明细</div> -->
      <el-form label-width="120px" :model="formData" :rules="formRules" ref="elFrom" label-position="top">

        <el-form-item label="公告标题" prop="title">
          <el-input v-model="formData.title" placeholder="输入公告标题" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="公告详情" prop="info">
          <div class="tinymce-box flex">
            <tinymce @input="tinymceInput" :value="formData.info"></tinymce>
            <div class="html-box">
              <div class="notice-title">{{ formData.title ? formData.title : '这是标题' }}</div>
              <div class="notice-time">1970-01-01</div>
              <div class="notice-content" v-html="formData.info"></div>
            </div>

          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Tinymce from "@/components/tinymce/tinymce";
import miniApi from '@/api/mini'


export default {
  components: {
    Tinymce
  },
  data() {
    return {
      loading: false,
      editType: 'add',
      formData: {
        id: '',
        title: '',
        info: ''
      },
      formRules: {
        title: [
          {
            required: true,
            message: "请输入公告标题",
            trigger: "change",
          },
        ],
        info: [
          {
            required: true,
            message: "请输入公告详情",
            trigger: "change",
          },
        ],
      },
      submitBtn: false,
    };
  },
  computed: {
  },
  mounted() {
    let id = this.$route.query.sn
    if (id) {
      miniApi.getConfigDetails({ id }).then(res => {
        console.log(res, '公告详情')
        if (res.code == 200) {
          this.formData = {
            id,
            title: res.data.title,
            info: res.data.content
          }
          this.editType = 'update'
        }
        this.loading = false
      })
    }
  },
  methods: {
    tinymceInput(e) {
      const regex = new RegExp('img', 'gi')
      e = e.replace(regex, `img style="max-width:100%;object-fit: cover;"`)
      this.formData.info = e;
    },
    // 提交
    saveSubmit() {
      this.$refs['elFrom'].validate((valid) => {
        if (valid) {
          let formData = this.formData
          this.submitBtn = true;
          if (this.editType == 'add') {
            miniApi.addOrUpdIntroductionAdmin({
              title: formData.title,
              content: formData.info
            }).then(res => {
              console.log(res, '新增增减项')
              if (res.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancelFunc()
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            })
          } else {
            miniApi.addOrUpdIntroductionAdmin({
              id: formData.id,
              title: formData.title,
              content: formData.info
            }).then(res => {
              console.log(res, '更新增减项')
              if (res.code == 200) {
                this.$message({
                  message: "更新成功",
                  type: "success",
                });
                this.cancelFunc()
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/addPage.scss";

.tinymce-box {
  width: 100%;
  margin-bottom: 20px;

  .html-box {
    width: 375px;
    height: 600px;
    border: 1px solid #cccccc;
    margin-left: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }

  ::v-deep .tox-tinymce {
    min-height: 600px;
  }
}

.notice-title {
  font-size: 17px;
  font-weight: 600;
  padding: 10px 15px 0;
}

.notice-time {
  font-size: 13px;
  color: #999999;
  padding: 10px 15px 20px;
}

.notice-content {
  padding: 0 15px 0;
}

::v-deep .el-form-item__content {
  line-height: normal;
}
</style>